<template>
	<div class="dynamic-table-privilege-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px" @close="clean">
			<el-form ref="privilegeDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="授权用户">
							<el-select v-model="state.ruleForm.userIds" multiple class="filter-item" placeholder="请选择">
								<el-option v-for="item in state.userOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="授权角色">
							<el-select v-model="state.ruleForm.roleIds" multiple class="filter-item" placeholder="请选择">
								<el-option v-for="item in state.roleOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="dynamicTablePrivilegeDialog">
import { reactive, ref } from 'vue';
import { dynamicTableApi } from '/@/api/tableConfig';
import { userApi } from '/@/api/user';
import { roleApi } from '/@/api/role';
import { ElMessage } from 'element-plus';

// 定义变量内容
const privilegeDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		tableConfigId: undefined, // 表格配置ID
		dataId: undefined, // 数据ID
		userIds: [], // 用户id
		roleIds: [], // 角色id
	},
	userOptions: [],
	roleOptions: [],
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (tableConfigId: number, row: any) => {
	state.dialog.title = '数据授权';
	state.dialog.submitTxt = '确 定';
	state.dialog.isShowDialog = true;
	state.ruleForm.tableConfigId = tableConfigId;
	state.ruleForm.dataId = row.id;

	// 获取数据权限详情
	dynamicTableApi()
		.getDataPrivilege({
			tableConfigId: tableConfigId,
			dataId: row.id
		})
		.then((res) => {
			if (res.code === 0) {
				state.ruleForm.userIds = res.data.userIds || [];
				state.ruleForm.roleIds = res.data.roleIds || [];
			}
		})
		.catch((err) => {
			console.error('获取数据权限失败:', err);
		});

	// 获取用户列表
	userApi()
		.getUserOptions()
		.then((res) => {
			state.userOptions = res.data;
		})
		.catch((err) => {
			ElMessage.error(err.msg || '获取用户列表失败');
		});

	// 获取角色列表
	roleApi()
		.getRoleOptions()
		.then((res) => {
			state.roleOptions = res.data;
		})
		.catch((err) => {
			ElMessage.error(err.msg || '获取角色列表失败');
		});
};

// 清空表单
const clean = () => {
	state.ruleForm = {
		tableConfigId: undefined,
		dataId: undefined,
		userIds: [],
		roleIds: [],
	};
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 提交
const onSubmit = () => {
	privilegeDialogFormRef.value.validate((valid: boolean) => {
		if (valid) {
			dynamicTableApi()
				.bindDataPrivilege({
					tableConfigId: state.ruleForm.tableConfigId,
					dataId: state.ruleForm.dataId,
					userIds: state.ruleForm.userIds,
					roleIds: state.ruleForm.roleIds
				})
				.then((res) => {
					if (res.code === 0) {
						closeDialog();
						ElMessage.success('授权成功');
					} else {
						ElMessage.error(res.msg || '授权失败');
					}
				})
				.catch((err) => {
					ElMessage.error(err.msg || '授权失败');
				});
		}
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped>
.dynamic-table-privilege-dialog-container {
	/* 样式可以根据需要添加 */
}

.filter-item {
	width: 100%;
}
</style>